<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="山东电子口岸"/>
    <meta name="keywords" content="山东电子口岸"/>

    <%@include file="/WEB-INF/pages/common/taglib.jsp" %>
    <%@include file="/WEB-INF/pages/common/common.jsp" %>
    <link rel="stylesheet" href="${basePath}/resources/css/base.css"/>
    <link rel="stylesheet" href="${basePath}/resources/css/single.css"/>
    <!--[if lt IE 9]>
    <script src="${basePath}/singlewindows/js/html5.js"></script>
    <![endif]-->
    <title>山东电子口岸</title>
</head>
<script>
    function isNotNull(param) {
        if ($.trim(param) != "" && param != null) {
            return true;
        } else {
            return false;
        }
    }
    //将表单数据转为json
    function form2Json(id) {
        var arr = $("#" + id).serializeArray();
        var jsonStr = "";
        var json = "";
        for (var i = 0; i < arr.length; i++) {
            if (isNotNull(arr[i].value)) {
                jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",'
            }
        }
        if (isNotNull(jsonStr)) {
            jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
            jsonStr = "{" + jsonStr + "}";
            json = JSON.parse(jsonStr);
        }
        return json;
    }
    function registUser() {

        $.post("${path}/reg/regUsr?r" + Math.random(), form2Json("form_data"), function (data) {
            if (data) {
                if (data == "success") {
                    location.href = "${path}/reg/stepThree?username=" + $("#username").val();
                } else {
                    layer.alert(data, {icon: 5});
                }
            }
        });
    }
</script>
<body>
<!--头部 start-->
<div class="top">
    <div class="wrapper">
        <p class="welcome">您好，欢迎来到山东跨境电子商务单一窗口！</p>
        <div class="cl"></div>
    </div>
</div>
<header>
    <div class="wrapper">
        <a href="/"><h1>山东跨境电子商务单一窗口<span>SHANDONG Cross-Border E-Commerce SingleWindow</span></h1></a>
        <p class="tel">热线电话：400-676-0166</p>
        <div class="cl"></div>
    </div>
</header>
<!--头部 end-->
<!--流程 start-->
<div class="flow">
    <ol class="wrapper">
        <li><i>1</i> 邮箱验证</li>
        <li class="active"><i>2</i> 填写用户信息</li>
        <li><i>3</i> 注册成功</li>
    </ol>
</div>
<!--流程 end-->
<div class="wrapper">
    <div class="flow2">
        <form id="form_data">
            <!-- 是否从邮箱链接过来 -->
            <input type="hidden" name="mailKey" id="mailKey"
                   value="${regMail.mailKey}">
            <input type="hidden" name="mail" id="mail" value="${regMail.mail}">

            <table>
                <tr>
                    <th><i class="icon icon1"></i><h4>完善用户信息</h4></th><td><cite>用以登录账号和找回密码</cite></td>
                </tr>
                <tr>
                    <th>注册邮箱</th><td><input type="text" value="${regMail.mail}" readonly="readonly" /></td>
                </tr>
                <tr>
                    <th><i>*</i> 用户名</th><td><input type="text" maxlength="20" data-rangelength="[2,20]"
                                                    data-regexp="^[a-zA-Z][a-zA-Z0-9_]*$"
                                                    data-required="true"
                                                    data-regexp-message="请输入2位及以上数字、字母和下划线,并以字母开头"
                                                    data-rangelength-message="请输入2位及以上数字、字母和下划线,并以字母开头"
                                                    data-required-message="请输入2位及以上数字、字母和下划线,并以字母开头"
                                                    name="username" id="username" value=""
                                                    placeholder="请输入登录用户名" /></td>
                </tr>
                <tr>
                    <th colspan="2" class="hrB"><hr /></th>
                </tr>
                <tr>
                    <th><i class="icon icon2"></i><h4>设置登录密码</h4></th><td><cite>用以确保账号安全</cite></td>
                </tr>
                <tr>
                    <th><i>*</i> 密码</th><td><input type="password" id="password" maxlength="20"
                                                   data-rangelength="[6,20]" type="password"
                                                   data-required="true"
                                                   data-rangelength-message="请输入至少6位密码"
                                                   data-minlength-message="请输入至少6位密码"
                                                   data-required-message="请输入至少6位密码"
                                                   name="password" value=""
                                                   placeholder="请输入登录密码" /></td>
                </tr>
                <tr>
                    <th><i>*</i> 确认密码</th><td><input type="password" maxlength="20" name="verifyPassword"
                                                     id="verifyPassword"
                                                     value="" data-equalto="#password"
                                                     data-equalto-message="密码输入不一致"
                                                     data-required="true" data-required-message="密码输入不一致"
                                                     placeholder="请输入确认密码"  /></td>
                </tr>
                <tr>
                    <th colspan="2" class="hrB"><hr /></th>
                </tr>
                <tr>
                    <th><i class="icon icon3"></i><h4>设置企业信息</h4></th><td><cite>用以登录账号和找回密码</cite></td>
                </tr>
                <tr>
                    <th><i>*</i> 企业名称</th><td><input type="text" data-required="true" maxlength="20"
                                                     data-required-message="请输入企业名称"
                                                     name="name" id="name" value=""
                                                     placeholder="请输入企业营业执照上的企业名称"  /></td>
                </tr>
                <tr>
                    <th><i>*</i> 组织机构代码/社会信用ID</th><td><input type="text" data-required="true" maxlength="20"
                                                       data-regexp="^[A-Za-z0-9]{1,20}$"
                                                       data-rangelength-message="请输入9-18位组织机构代码/社会信用ID"
                                                       data-regexp-message="请输入正确的组织机构代码/社会信用ID"
                                                       data-required-message="请输入组织机构代码/社会信用ID"
                                                       name="organizationId" id="organizationId" value=""
                                                       placeholder="请输入组织机构代码/社会信用ID" /></td>
                </tr>
                <tr>
                    <th>企业地址</th><td><input type="text" maxlength="50" name="address"
                                            id="address"
                                            value="" placeholder="请输入企业办公所在地址"/></td>
                </tr>
                <tr>
                    <th>联系人</th><td><input type="text" maxlength="20" name="contact"
                                           id="contact"
                                           value="" placeholder="请输入企业联系人" /></td>
                </tr>
                <tr>
                    <th>所属关区</th>
                    <td>
                        <input name="distinctSign" type="radio" value="0"/>济南关区&nbsp;
                        <input name="distinctSign" type="radio" value="1"/>青岛综试区&nbsp;
                        <input name="distinctSign" type="radio" value="2"/>青岛关区&nbsp;
                    </td>
                </tr>


                <tr>
                    <th><i>*</i>联系方式</th><td><input type="text" maxlength="20" name="phone"
                                            id="phone" value=""
                                            placeholder="请输入企业联系方式（手机）" /></td>
                </tr>
                <tr>
                    <th colspan="2" class="hrB"><hr /></th>
                </tr>

                <tr>
                    <th class="noB"></th><td><input type="submit" value="注   册" /></td>
                </tr>
            </table>
        </form>
    </div>
</div>
<footer>
    <div class="wrapper">
        <address>版权所有 山东电子口岸  Copyright© 2015 sdeport.gov,cn   All Rights Reserved<br />鲁ICP备14042570号-2<br /></address>
        <%--<img src="${basePath}/images/wechat.png" />--%>
        <div class="cl"></div>
    </div>
</footer>
<script>
    $(function () {
        $("#form_data").validate({
            debug: false, //false表示验证通过后不要自动提交表单
            onkeyup: false, //表示关闭按键松开时候监听验证
            rules: {
                username: {
                    required: true,
                    rangelength: [2, 20],
                    checkUsername: true
                },
                password: {
                    required: true,
                    rangelength: [6, 20]
                },
                verifyPassword: {
                    equalTo: "#password"
                },
                name: {
                    required: true,
                    maxlength: 80
                },
                organizationId: {
                    required: true,
                    checkOrganizationId: true,
                    rangelength: [9, 18]
                },
//                idNo: {
//                    required: true,
//                    checkIdNo: true
//                },
                distinctSign: {
                    required: true
                },
                address: {
                    maxlength: 80
                },
                contact: {
                    maxlength: 80
                },
                phone: {
                    required: true,maxlength: 12
                }
            },
            messages: { //自定义错误信息，默认为英文，除了在这里配置以为，还可以通过配置文件进行配置
                username: {
                    required: "请输入登录用户名",
                    rangelength: "用户名长度限制为2-20个字符"
                },
                password: {
                    required: "请输入登录密码",
                    rangelength: "密码长度限制为6-20个字符"
                },
                verifyPassword: {
                    equalTo: "密码输入不一致！"
                },
                name: {
                    required: "请输入企业名称",
                    maxlength: "长度超过最大80个字符限制"
                },
                organizationId: {
                    required: "请输入社会信用代码或组织机构代码",
                    rangelength: "代码长度限制为9-18个字符"
                },
//               idNo: {
//                    required: "请输入身份证号"
//               },
                distinctSign: {
                    required: "请选择所属关区",
                },
                address: {
                    maxlength: "长度超过最大80个字符限制"
                },
                contact: {
                    maxlength: "长度超过最大80个字符限制"
                },
                phone: { required: "请输入联系方式",
                    maxlength: "请输入正确的联系方式"
                }
            },  errorElement: "p",
            //验证通过可以在这里做你想做的事情
            submitHandler: function (form) {
                registUser();
            }
        });
    });
    jQuery.validator.addMethod("checkUsername", function (value) {
        var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/;
        if (reg.test(value)) {
            return true;
        }
        return false;
    }, "请输入字母开头的字母数字下划线组合");

    jQuery.validator.addMethod("checkOrganizationId", function (value) {
        var reg = /^[A-Za-z0-9]{1,20}$/;
        if (reg.test(value)) {
            return true;
        }
        return false;
    }, "请输入正确的社会信用代码或组织机构代码");

//    jQuery.validator.addMethod("checkIdNo", function (value) {
//        var reg = /^[0-9]{15,18}$/;
//        if (reg.test(value)) {
//            return true;
//        }
//        return false;
//    }, "请输入15或18位身份证号码");
</script>
</body>
</html>
